<template>
  <div class="chart-time-option-container">
    <div class="chart-time-option-line">
      <el-select
        :value="selectType"
        @change="handleSelectChange"
        class="plink_option_select"
      >
        <el-option
          v-for="item in selectOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-tooltip
        class="chart-tooltip"
        effect="dark"
        content="选择报表数据值计算出的单位，报表数值将根据该单位进行换算，例如：当选择为天时，则每个数据值统计单位为N天"
        placement="bottom"
      >
        <i class="iconfont icon-jieshishuoming1"></i>
      </el-tooltip>
      <el-select
        :value="selectTimeUnit"
        placeholder="设置单位"
        @change="handleUnitChange"
      >
        <el-option
          v-for="item in unitOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 如果是 平均维修用时 页面下的 “1.按照”附加组件工时记录的工作用时“计算“ 不显示-->
      <el-checkbox
        :value="isStop"
        @change="handleCheckChange"
        v-if="!(this.pageInfo && this.pageInfo.value === 'average-response-time')"
      >
        扣除工单暂停时长
      </el-checkbox>
      <chart-download :chart-type="chartType"/>
    </div>
  </div>
</template>

<script>
import ChartDownload from './ChartDownload';
import { ref, watch } from 'vue';

export default {
  name: 'chart-time-option-setting',
  emit: ['fetchChartData'],
  props: {
    chartOption: {
      type: Object,
      default: () => ({})
    },
    pageInfo: {
      type: Object,
      default: () => ({}),
    },
    chartType: {
      type: String,
      default: ''
    },
  },
  computed: {
    selectType() {
      return this.chartOption?.selectType
    },
    selectTimeUnit() {
      return this.chartOption?.selectTimeUnit
    },
    isStop() {
      return this.chartOption?.isStop
    },
  },
  setup(props, { emit }) {
    const timeOption = ref({
      // 查询方式
      selectType: props.pageInfo.value === 'average-response-time' ? 3 : 1,
      // 选择时间单位(1.分 2.小时 3.天)
      selectTimeUnit: 2,
      // 是否包含暂停(0.不包含暂停时间 1.包含暂停)
      isStop: false,
    });

    const selectOption = ref([]);

    const responseOption = [
      {
        value: 1,
        label: '从“客户提报事件/工单创建“至“工单接受”',
      },
      {
        value: 2,
        label: '从“客户提报事件/工单创建“至“工单指派”',
      },
      {
        value: 3,
        label: '从”客户提报事件/工单创建“至“工单开始”',
      }
    ];

    const serviceOption = [
      {
        value: 1,
        label: '从”开始工单“开始计算',
      },
      {
        value: 2,
        label: '从”接受工单“开始计算',
      },
      {
        value: 3,
        label: '从”指派工单“开始计算',
      },
      {
        value: 4,
        label: '从”创建工单“开始计算',
      },
      {
        value: 5,
        label: '从”工单关联事件创建“开始计算',
      },
    ];

    const maintenanceOption = [
      {
        value: 1,
        label: '按照”附加组件工时记录的工作用时“计算',
      },
      {
        value: 2,
        label: '按照”开始工单至完成工单“计算',
      },
    ];

    const unitOption = [
      {
        value: 1,
        label: '分钟',
      },
      {
        value: 2,
        label: '小时',
      },
      {
        value: 3,
        label: '天',
      },
    ];

    const optionChange = () => {
      if (!props.pageInfo.value) return;

      if (props.pageInfo.value === 'average-response-time') {
        selectOption.value = responseOption;
      } else if (props.pageInfo.value === 'average-service-time') {
        selectOption.value = serviceOption;
      } else {
        selectOption.value = maintenanceOption;
      }
    };

    const handleSelectChange = value => {
      timeOption.value.selectType = value;
      const newValue = {
        ...props.chartOption,
        selectType: value
      }
      emit('fetchChartData', newValue);
    };

    const handleUnitChange = value => {
      timeOption.value.selectTimeUnit = value;
      const newValue = {
        ...props.chartOption,
        selectTimeUnit: value
      }
      emit('fetchChartData', newValue);
    };

    const handleCheckChange = value => {
      timeOption.value.isStop = value;
      const newValue = {
        ...props.chartOption,
        isStop: value
      }
      emit('fetchChartData', newValue);
    };

    const refresh = () => {
      timeOption.value = {
        selectType: props.pageInfo.value === 'average-response-time' ? 3 : 1,
        selectTimeUnit: 2,
        isStop: false,
      };
    };

    watch(
      () => [props.pageInfo],
      () => {
        refresh();
        optionChange();
      },
      {
        immediate: true,
        deep: true,
      }
    );

    return {
      timeOption,
      selectOption,
      optionChange,
      unitOption,
      handleSelectChange,
      handleUnitChange,
      handleCheckChange,
      refresh,
    };
  },
  components: {
    [ChartDownload.name]: ChartDownload,
  }
};
</script>

<style lang="scss" scoped>
.chart-time-option-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .chart-time-option-line {
    display: flex;
    align-items: center;

    i {
      color: #afb5b3;
    }

    .el-select {
      width: 100px;
      margin: 0 20px 0 10px;
    }

    .el-checkbox {
      margin-right: 2%;
    }

    .plink_option_select {
      width: 300px;
    }
  }
}
</style>
